<template>
	<view class="flex-col" :class="$attrs">
		<view class="flex item-center h-20">
			<text class="flex-shrink text-color-regular">{{sort+1}}、（{{type ===2?'单选':'多选'}}）</text>
			<input
				:value="title"
				:disabled="disabled"
				:maxlength="10"
				class="flex-1 w-0"
				placeholder="请填写标题"
				placeholder-class="text-color-hint"
				@input="onInput"
			/>
			<image class="w-16 h-16 ml-4 flex-shrink" src="@/static/svg/icon-edit-gray.svg"></image>
			<!-- <view v-if="type === 3" class="mutil-box"></view> -->
		</view>
		<view class="mt-12 radius-4 bg-white px-12 py-8">
			<view v-for="(option, i) in options" :key="i" class="flex item-center h-20">
				<template v-if="type === 2">
					<image v-if="option.checkState === 2" @click="changeCheckState(option,1)" class="w-12 h-12 mr-4 flex-shrink" src="@/static/svg/activity/icon-radio-check-blue.svg"></image>
					<image v-else class="w-12 h-12 mr-4 flex-shrink"  @click="changeCheckState(option,2)" src="@/static/svg/activity/icon-radio-default.svg"></image>
				</template>
				<template v-if="type === 3">
					<image v-if="option.checkState === 2"  @click="changeCheckState(option,1)" class="w-14 h-14 mr-4" src="@/static/svg/checkbox-checked.svg"></image>
					<image v-else class="w-14 h-14 mr-4"  @click="changeCheckState(option,2)" src="@/static/svg/checkbox-default.svg"></image>
				</template>
				<input
					v-model="option.optionText"
					:disabled="disabled"
					:maxlength="10"
					class="flex-1 w-0 fs-12"
					placeholder="请输入选项内容"
					placeholder-class="text-color-regular"
				/>
				<image v-if="options.length > 2" class="w-14 h-14 ml-4 flex-shrink" src="@/static/svg/icon-trash.svg" @click="deleteOption(option, i)"></image>
			</view>
			<button v-if="options.length < 10" class="mt-12 flex center radius-8 h-32 fs-12 bg-white" style="border:1px solid #00AEFF;" @click="toAddOption">
				<image class="w-14 h-14 mr-4" src="@/static/svg/icon-add-blue.svg"></image>
				<text style="color:#00AEFF;">添加选项</text>
			</button>
		</view>
		<view class="flex justify-between item-center h-20 mt-12">
			<view class="flex item-center" @click="onCheckChange(mustState!==2)">
				<image v-if="mustState===2" class="w-14 h-14 mr-4" src="@/static/svg/checkbox-checked.svg"></image>
				<image v-else class="w-14 h-14 mr-4" src="@/static/svg/checkbox-default.svg"></image>
				<text>必填</text>
			</view>
			<view class="flex item-center text-color-regular">
				<view class="" :class="sort===0 ? 'text-color-hint' : ''" @click="onActionClick('up')"><text>上移</text></view>
				<view>｜</view>
				<view class="" :class="isLast ? 'text-color-hint' : ''" @click="onActionClick('down')"><text>下移</text></view>
				<view>｜</view>
				<view class="" :class="sort===0 ? 'text-color-hint' : ''" @click="onActionClick('top')"><text>置顶</text></view>
				<view>｜</view>
				<view class="" @click="onActionClick('del')"><text>删除</text></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, unref, watch, watchEffect } from 'vue'
	
	const props = defineProps({
		isLast: {
			type: Boolean
		},
		sort: {
			type: Number,
			default: 0
		},
		type: {
			type: Number,
			default: 2
		},
		title: {
			type: String
		},
		mustState: {
			type: Number,
			default: 1 // 类型(1-填写项，2-单选项)
		},
		options: {
			type: Array,
			default: []
		},
		disabled: {
			type: Boolean,
			default: false
		},
		disabledTip: {
			type: String
		}
	})
	
	const emits = defineEmits(['onActionClick', 'update:title', 'update:mustState', 'update:options'])
	
	const onInput = ({ detail }) => {
		emits('update:title', detail.value)
	}
	
	const onCheckChange = (val) => {
		if (props.disabled) {
			uni.showToast({
				title: props.disabledTip,
				icon: 'none'
			})
			return
		}
		emits('update:mustState', val === true ? 2 : 1)
	}
	
	const deleteOption = (item, index) => {
		if (props.disabled) {
			uni.showToast({
				title: props.disabledTip,
				icon: 'none'
			})
			return
		}
		props.options.splice(index, 1)
		emits('update:options', props.options)
	}
	
	const toAddOption = () => {
		if (props.disabled) {
			uni.showToast({
				title: props.disabledTip,
				icon: 'none'
			})
			return
		}
		if (props.options.length < 10) {
			props.options.push({
				checkState: 1,
				optionText: ''
			})
			emits('update:options', props.options)
		}
	}
	
	const onActionClick = (type) => {
		if (props.disabled) {
			uni.showToast({
				title: props.disabledTip,
				icon: 'none'
			})
			return
		}
		switch (type) {
			case 'up':
				if (props.sort === 0) return
				break
			case 'down':
				if (props.isLast) return
				break
			case 'top':
				if (props.sort === 0) return
				break
			default:
		}
		emits('onActionClick', type, props.modelValue, props.sort)
	}
	const changeCheckState = (option,num) => {
		if(props.type == 2){
			props.options.forEach(it => {
				it.checkState = 1
			})
			option.checkState =  num
			return
		}
		option.checkState = option.checkState === 2?1:2
	}
</script>
<style scoped lang="scss">
	.mutil-box{
		height: 16px;
		width: 16px;
		border-radius: 2px;
		border: 2rpx solid rgba(51,51,51,0.6);
	}
</style>
